// 1. Install dependencies DONE
// 2. Import dependencies DONE
// 3. Setup webcam and canvas DONE
// 4. Define references to those DONE
// 5. Load handpose DONE
// 6. Detect function DONE
// 7. Drawing utilities DONE
// 8. Draw functions DONE

import React, { useRef,useState } from "react";
// import logo from './logo.svg';
import * as tf from "@tensorflow/tfjs";
import * as handpose from "@tensorflow-models/handpose";
import Webcam from "react-webcam";
import "./App.css";
import { drawHand } from "./utilities";

import * as fp from "fingerpose"
import victory from "./victory.jpg"
import thumbs_up from "./thumbs_up.jpg"
import ok from "./ok.jpg"

function App() {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);

  const [emoji,setEmoji] = useState(null);
  const images = {thumbs_up:thumbs_up,victory:victory,ok:ok}

  const runHandpose = async () => {
    const net = await handpose.load();
    // console.log("Handpose model loaded.");
    //  Loop and detect hands
    setInterval(() => {
      detect(net);
    }, 100);
  };

  const detect = async (net) => {
    // Check data is available
    if (
      typeof webcamRef.current !== "undefined" &&
      webcamRef.current !== null &&
      webcamRef.current.video.readyState === 4
    ) {
      // Get Video Properties
      const video = webcamRef.current.video;
      const videoWidth = webcamRef.current.video.videoWidth;
      const videoHeight = webcamRef.current.video.videoHeight;

      // Set video width
      webcamRef.current.video.width = videoWidth;
      webcamRef.current.video.height = videoHeight;

      // Set canvas height and width
      canvasRef.current.width = videoWidth;
      canvasRef.current.height = videoHeight;

      // Make Detections
      const hand = await net.estimateHands(video);
      // console.log(hand);

      if(hand.length>0){

          // console.log(hand);
          const GE = new fp.GestureEstimator([
              fp.Gestures.VictoryGesture,
              fp.Gestures.ThumbsUpGesture
          ]);

          const gesture = await GE.estimate(hand[0].landmarks,8)
          // console.log(gesture)

          if(gesture.gestures !== undefined && gesture.gestures.length > 0){
              const confidence = gesture.gestures.map(
                  (prediction)=>prediction.confidence
              );
              const maxConfidence = confidence.indexOf(
                  Math.max.apply(null,confidence)
              );
              console.log('output start -------------------------')
              console.log(maxConfidence)
              console.log(gesture.gestures)
              setEmoji(gesture.gestures[0].name);
              // console.log(emoji)
              console.log(gesture.gestures[0].name)
              console.log('output end -------------------------------------')
          }
      }

      // Draw mesh
      const ctx = canvasRef.current.getContext("2d");
      drawHand(hand, ctx);
    }
  };

  runHandpose();

  return (
    <div className="App">
      <header className="App-header">
        <Webcam
          ref={webcamRef}
          style={{
            position: "absolute",
            marginLeft: "auto",
            marginRight: "auto",
            left: 0,
            right: 0,
            textAlign: "center",
            zindex: 9,
            width: 640,
            height: 480,
          }}
        />

        <canvas
          ref={canvasRef}
          style={{
            position: "absolute",
            marginLeft: "auto",
            marginRight: "auto",
            left: 0,
            right: 0,
            textAlign: "center",
            zindex: 9,
            width: 640,
            height: 480,
          }}
        />

        {emoji !== null ? <img src={images|emoji} style={{
            position:"absolute",
            marginLeft:"auto",
            marginRight:"auth",
            left:400,
            bottom:500,
            right:0,
            textAlgin:"center",
            height:100,
        }} />:""}
      </header>
    </div>
  );
}

export default App;
